<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框输入数据添加到页面上</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #app{
            width: 50%;
            margin: 30px auto;
        }
        #add_label{
            width: 480px;
            height: 25px;
            margin-top: 30px;
            border: 1px solid #333333;
            font-size: 16px;
            color: black;
        }
        #addBtn{
            width: 180px;
            height: 28px;
            line-height: 28px;
            border: 1px solid #666666;
            background: #000000;
            font-size: 15px;
            font-weight: bold;
            color: #ffffff;
            border-radius: 30px;
            cursor: pointer;
        }
        #list{
            width: 100%;
            min-height: 300px;
            list-style: none;
            border: 1px solid #000000;
            text-align: center;
            margin-top: 20px;
        }
        #list li{
            width: 18%;
            background: black;
            color:#ffffff;
            font-weight: bold;
            float: left;
            margin: 10px 10px 10px 16px;
            text-align: center;
            padding: 5px 10px;
            position: relative;
            cursor: pointer;
        }
        #list li:hover{
            background: #333333;
        }
        #list li span.del{
            color: red;
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: white;
            font-size: 12px;
            line-height: 15px;
            position: absolute;
            top: -2px;
            right: -2px;
            cursor: pointer;
        }
        #list li span.del:hover{
            background: #cccccc;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>输入框输入数据点击确定或者回车添加到页面上</h1>
    <input type="text" placeholder="  标签内容" id="add_label"/>
    <button type="button" id="addBtn">确定添加</button>

    <ul id="list">

    </ul>
</div>

<script>

    //通过id获取标签
    function $ID(el){
        return document.getElementById(el);
    }

    function $getELEByClass(el){
        return document.getElementsByClassName(el);
    }

    //创建元素
    function createEle(el_t,value){
        var fragment = document.createDocumentFragment();
        let el = document.createElement(el_t);
        el.innerHTML = value;
        let spanEl = document.createElement("span");
        spanEl.className = "del";
        spanEl.innerHTML = 'x';
        el.appendChild(spanEl);
        fragment.appendChild(el);
        return fragment;
    }

    var elObj = {
        //获取输入框
        add_label : $ID("add_label"),
        //获取添加的按钮
        addBtn : $ID("addBtn"),
        //获取ul容器
        list : $ID("list"),
        //清理输入框
        clearInput (){
            this.add_label.value = '';
        },
        //添加点击事件
        eleClick(){
            this.addBtn.onclick = (() => {
                this.doAppend();
            });
        },
        //给输入框添加键盘事件
        elemKeyUp(){
            this.add_label.onkeyup = ((e) => {
                if(e.keyCode == 13){
                    this.doAppend();
                }
            });
        },
        doAppend(){
            let add_label_value = this.add_label.value;
            if(add_label_value.length == 0){
                alert("请输入标签名称");
                return false;
            }
            let appendEle = createEle("li",add_label_value);
            //给当前元素追加元素
            this.list.append(appendEle);
            this.clearInput();
        },
        clearLi(){
            let LiList = $getELEByClass("del");
            this.list.addEventListener("click",() => {
                if(event.target.tagName == 'SPAN'){
                    event.target.parentNode.style.display = 'none';
                }
            })

        }
    }

    //通过对象初始化好点击事件
    elObj.eleClick()
    //通过对象初始化好键盘事件
    elObj.elemKeyUp();
    //通过对象初始化得到关闭事件 加载类的时候已经加载到页面上了
    elObj.clearLi();



</script>

</body>
</html>